<template>
    <!-- 自定义 动态增删 tabs 搭配 menu -->
    <div>
        <el-tabs
            v-model="activeIndex"
            type="card"
            @tab-remove="removeTab"
            @tab-click="clickTab"
        >
            <el-tab-pane
                :key="item.name"
                v-for="item in openTab"
                :label="item.title"
                :name="item.name"
                :closable="item.closable"
            >
                <!-- <iframe
                    data-name="123"
                    :data-path="item.path"
                    :data-full="item.fullPath"
                    :src="fullPath2SubPath(item.fullPath)"
                    :ref="item.fullPath"
                ></iframe> -->
                <!-- <component :is="item.name"></component> -->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import 'vuex';

import guide from '@/views/Guide/guide.vue';

export default {
    name: 'MenuTabs',
    props: {
        activeTab: {
            type: String,
            default: () => {
                return '';
            }
        },
        tabsItem: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    components: { guide },
    data() {
        return {
        };
    },
    computed: {
        openTab() {
            return this.$store.state.openTab;
        },
        activeIndex: {
            get () {
                return this.$store.state.activeIndex;
            },
            set (val) {
                this.$store.commit('set_active_tabs', val);
            }
        }
    },
    watch: {
        '$route'(to, form) {
            let flag = false;
            for (let item of this.openTab) {
                if (item.name == to.name) {
                    this.$store.commit('set_active_tabs', to.path);
                    flag = true;
                    break;
                }
            }

            if (!flag) {
                this.$store.commit('add_tabs', { route: to.path, name: to.name });
                this.$store.commit('set_active_tabs', to.path);
            }
        }
    },
    mounted() {
        // 刷新时以当前路由做为tab加入tabs
        // 当前路由不是首页时， 添加首页以及另一页到 store 里，并设置激活状态
        // 当当前路由是首页时，添加首页到store，并设置激活状态
        if (this.$route.path !== '/' && this.$route.path !== '/guide') {
            this.$store.commit('add_tabs', { route: '/guide', name: '引导页' });
            this.$store.commit('add_tabs', { route: this.$route.path, name: this.$route.name });
            this.$store.commit('set_active_index', this.$route.path);
        } else {
            this.$store.commit('add_tabs', { route: '/guide', name: '引导页' });
            this.$store.commit('set_active_index', '/guide');
        }
    },
    methods: {
        clickTab(tab) {
            this.$route.push({ path: this.activeIndex });
        },
        removeTab(target) {
            if (target == '/' || target == '/guide') {
                // eslint-disable-next-line no-useless-return
                return;
            }
            this.$store.commit('delete_tabs', target);
            if (this.openTab && this.openTab.length >= 1) {
                this.$store.commit('set_active_index', this.openTab[this.openTab.length - 1].route);
                this.$route.push({ path: this.activeIndex });
            }
        }
    }
};
</script>

<style lang="less" scoped></style>
